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Preparing Files for Dreamweaver: 


Before we begin to construct a web page in Dreamweaver (or HTML) we need a plan. Usually 
the site is designed in Photoshop or Illustrator, then the images are extracted and saved for 
use on the web site. We will want at least three folders. 


The Site Folder: 


Gell i) eal The “Site” Folder is where you will store the actual Dreamweaver 
Site working Sketches and CSS files. 


The images that you will use on the site must also go into Site 
folder as well as style sheets, animations, and other visuals. If 
these visuals are not stored in the same folder as the site files, 
the browser will not be able to find them and they will not ap- 
pear in the browser. Images saved for the web, typically, are 72 
ppi, and jpeg, gif, or png. These will open quickly in the browser. 
We are careful to limit images in the Site folder to those that 
actually appear on the site. 


Working Files Folder: 


The Working files are the Photoshop files and Illustrator files (and others) that were 
used to create the visuals. You may find you need to modify an image in which case 
you will want to keep the original workable psd or ai file. 


Sketches Folder 

The Sketches Folder may be considered optional. This is where you store the design 
files used to plan the site. 

Practice Files 


For this lesson, we will be using the files for the “Pick-a Basket Site.” Since the files were 
already prepared, we will not have working files unless we create some, so that folder 
has only a text file. There is an example image in the Sketches folder which will provide 
a plan for our site. Download and explore the PickBasket folder. 


The example 
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Opening Dreamweaver 


Once the site has been designed and the files are saved to the appropriate folders, 
we are ready to open Dreamweaver and begin constructing the site. Open Dream- 
weaver by clicking on the Dreamweaver icon in the dock, usually at the bottom of 
your screen. On Windows Go: Start > All Programs > Adobe Dreamweaver 


HTML 


Recent files —————_» 


Stored files —————» 


Opening a New Dreamweaver page 


When you click the icon, the Welcome screen will open. If the Welcome screen does not open, 
if not, go: File > New. 


Let’s look at the Welcome Screen for a minute. On the left, it offers the opportunity to open 
existing documents. These may be either pages that have been open recently, or pages that 
are stored on the computer (or elsewhere). To open a recent file, simply click the name dis- 
played on the Welcome Screen. To open an older file, click the file folder and browse to the 
file. 


Today, however, we intend to begin a new Dreamweaver page, so we need to look at the 
middle column and click HTML 


The Dreamweaver Workspace 


The Dreamweaver is a program that writes HTML code. The big advantage of Dreamweaver is 
that we can see what is happening as the page develops. When we work with Dreamweaver 
we can choose to work with only the visuals, in which case we choose “Design view.” We may 
also choose to work with only the code (Dreamweaver has an excellent code writer) in which 
case we would choose “Code view.’ It can be useful to see what is happening in the code 
when we alter a visual or what is happening to the visual when we alter the code, for this we 
will choose “Split view.” We will want to work in Split view. 


Untitled-2 X | 


Code Design 
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Code view 
Split view 
Design view 


Panel groups 


Classic workspace Layout 


ify Format Commands Site Win Help 
> o "Common | Layout | Forms | Data | Spry | inContext Editing | Text | Favorites | 
CLASSIC ¥ CS Live = a 
a | mead) fa | EB ES | es a B- 
=) Untitled-2 (XHTML) 
Untitled-2 x 
Code [Espi] Design Live Code | 4 | Live View| | Inspect) © ©, Title: Untitled Document I. 
Address: al 
1 <TD0CTVPE html PUBLIC "-//M3C//0T0 XHTML 1.0 jl 
[=| Transitional //EN" 
"https aana onal L.dtd"> n 7 
2 / Any 3 .07g/1999 /xth 
2 Dil tp://www. w3 .org/1999/xhtm Title window 
se| 4 <meta http- ontent-Type" content=" text/html; 
s charset=UTF-8" /> 
t 5 <title>dUntitled Document</title> 
6 </head> 
| > 
g|? 
8 <body> 
a </body> 
R |i </html> 
1 
G 
E5 
2 
i] (DINGS SERVER BEHA) TAG INSPECTOR 
. Attributes [Behaviors] Tag <body> 
Q The Code Panel The Document Window my. - - - 
@ 
Fl 
& 
g 
Local Files a Size 
Œ Computer 
Tag Selector E Macintosh Ho 
JA (Gi Desktop folder 
{<body>} (Wey Q 100% + 1070x683 = 1K) 1sec | Unicode 5.1 UTF-8 
PROPERTIES: 
<> HTML Format | None E) Class ( None a Bz) Epse Title 
B css ID None 18 Link @ep Target 
a> 
(eas) 


Properties panel 


Setting up the Dreamweaver Workspace 

To prepare the workspace, we will want to do the following: 

1. In the upper left corner, click the “Split view” button 

2. Toggle the Workspace to “Classic” (This will open the Insert bar) 
3. Activate the “Layout tab” on the Insert bar. 


One of the first things we want to do is give the page a Title. Click in the Title Window and 
Type “Home” 


Opening Panel Groups 


On the right side of the workspace are the panel groups we will want to check to see if the 
following are open: CSS and the Tag Inspector. On the top of the Tag Inspector, click the 
Behaviors button. If you do not see something you need, go to Window in the top menu bar. 


Dreamweaver 
page 5 


Getting things on Screen 


Getting things on screen is actually pretty easy; the difficult part is getting them on screen in 
the right places and making them function. First, though, we should save the document. Go: 
File > Save as, and save the new page as, “Home,’ in the Site folder. 


Now, let’s start with just getting something on screen. Go: Insert > Image 


Navigate to the Pear image and select it. The image will appear on screen. The white back- 
ground is difficult to see on the page, so let's give it some contrast. 


Go Modify > Page Properties 


os isyo 
(standard| expanded 


..or just click the Page Properties button in the Properties panel. Either one will open the 
same menu box. Dreamweaver has several ways to access almost anything. In the menu box, 
select a nice dark green color for the background. This is also where we might specify a back- 


ground image or a text color. The Page Properties menu box has an options menu along the 
left side of the box. 


Page Properties 
Use Appearance CSS to set background Ske Samina 
g — Appearance (CSS) = 
color or image Appearance (HTML) Page font: Default Font [plz 
Links (CSS) i g 
Headings (CSS) Size: @ px 
Title/Encoding 
Tracing Image Text color: E 
Set background color a A E Ej #9F9 
Set backg round image assesses, Bac kgroitnd image: Browse...) 
Repeat: & 
Margins 
Left: Right: 
Top: px : Bottom: 
€ Help y ( Apply ») (Cancel ) (0K) 
Other options 
Category Links (CSS) 
Appearance (CSS) 3 
Appearance (HTML) Link font: (Same as page font) (3) BIZ] 
Links (CSS) j 
Headings (CSS) Size: (2E 
ieia le Link color: E) Rollover links: E| 
Visited links: E Active links: E] 
Underline style: | Never underline E] 


t+ Underline links or never underline 


Help SS Te 
Help ) ( Apply Cancel ) (=) 


The Page Links Option 
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Adding Text 


Let’s also add some text. Click beside the Pear image and a cursor will appear. Don’t be sur- 
prised if the cursor is as tall as the image. It will change when you begin to type. Let’s just type 
the following: 


Pears grow on trees and have been cultivated as a food since ancient times. The 
Pear tree will set fragrant white blossoms in Spring which mature into an edible 
and tasty fruit in early Autumn. There are numerous varieties of pear which ac- 
count for a variety of shapes and colors at maturity. 


> © Q Address: 


1 <IDOCTYPE html PUBLIC "-//W3C//0TD XHTML 1.0 

B Transi tional //EN" 
xá "http://www .w3 .org/TR/xhtml1/DTD/xhtml1-transitional. 
kid dtd"> 
2 <html xmins="http: //www .w3.org/1999/xh tml" > 
3 <head> 
4 <meta http-equiv="Content-Type" content=" text/html; 

charset=UTF-8" /> 

<title>Untitled Document</title> 

<style type="text/css"> 

body { 

background-color: #A1FF43; 


</head> 


<body> 

<img src="file:///Cruzer /HTML/Per fectedPear.jpg" alt= 
<? "Pear" width="288" height="216" /> Pears grow on 
trees and have beer| cultivated as food for thousands 
w. of years. Pear trees have fragrant white blossoms in 
Ta Spring which mature into an edible and tastey fruit 
Q 


5 
6 
? 
8 
9 
10 </style> 
11 
12 
13 
14 


in autumn. There are a number of varieties of pear 
accounting for several different shapes and colors at 
maturity. 
+115 </body> 
T 16 </html> 
te 


By default the text will align with the bottom of the image. If we click the image, the Proper- 
ties panel will offer an align option where we may choose to align middle or top. Try a few of 
these. The lines of text are as long as the screen unless we intentionally add returns. We will 
want more control of both text and image if we are to design effectively. 


The Code Panel 


While we have been adding things to the right side of the Document window, the left side 
has been changing. To understand what is going on, we will need to know something about 
the HTML language that actually controls what happens on screen. HTML stands for“Hyper 
Text Markup Language.’ It consists of a series of abbreviated words and symbols, not unlike 
what we use in text messaging. The HTML code controls what appears on screen. Dream- 
weaver writes the code for us, or we can write the code directly into the Code Panel. The most 
effective designers do some of each. HTML items are called tags, and there are several kinds 
of tags. Almost all tags are between carrot markers, like this: <html> The carrot markers tell 
the browser that the language between them is not supposed to appear on screen. Another 
basic thing about HTML tags is that they usually come in pairs, an open tag and a close tag. 
For example: <Title>PickBasket</Title> the </ > marker contains the close tag and the < > 
marker contains the open tag. In the case of the Title, we need this information to know where 
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the Title begins and ends. The kinds of page placement are framer tags, like <Title> which sur- 
round information that appears on screen so the program knows how to display the informa- 
tion, tags that go inside other tags, and tags that can stand alone without a close tag. The 
image is set with an <img> The img tag does not require a closer tag but ends with />. Inside 
the img tag, must go an src tag (Source Retrieval Code) This is like an address on the computer 
that tells the browser which image. The src is like a first and last name. The first part is the 
name of the image and the second part is the kind of image. The full name of the image must 
go in quotes. So the complete image tag is: <img src="Pear.jpeg’/> Sometimes other informa- 
tion goes in the img tag too such as size, border or align. Align on an image tells where the 
text goes beside the image, not where the image goes. 


An HTML page has a basic structure. If something is out of place parts of the page may not 
work. 


<html> 


<head> 
<title> some words </title> 
<style> 
</style> 


</head> 


<body> 


</body> 


</html> 


The page begins with the HTML open tag and ends with the html close tag. The Title and the 
Styles Tags go inside the HEAD tags. Things that must load before the page opens go inside 
the HEAD tags. Most of what appears on screen goes between the BODY tags. For more infor- 
mation about how to use HTML tags see the companion document: Fundamentals of HTML. 
Check the Code Panel and locate these basic structural tags. 


* Note: When we type code by hand, it is traditional to write in all caps to distinguish it from the other text. 


Dreamweaver’ code writer uses lower case for the standard tags 
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Div tags and CSS 


The most effective way to place material on a web page and control its location and/or ap- 
pearance is to use div tags and CSS (Cascading Style Sheets). div’s are containers that hold 
text, images, animations, video, and more. CSS positions the div’s on the screen and controls a 
variety of features inside and even outside the div’s. Typically div’s are assigned a name called 
an id which makes it possible to apply the proper CSS to each div. A typical div tag looks like 
this: 


<div id="Container”> 


</div> 


Notice the div tag has an open and close tag as well as an id within the div tag. Anything be- 
tween the open and close div tags is inside the div. 


Let's insert two div tags, one with code, and one with the Insert tools. First, delete the Pear 
image on screen by clicking the image to activate, then press delete. Then click behind the 
<body> (open body) tag and return once or twice. Then type: <div id="Container”> return 
twice and then type: </div> that will close the tag. Click the document window, a very slen- 
der div should appear. Now let's use the Insert method. Make sure your workspace is in layout 
view and then click the Insert relative div icon. 


Common | Layout Forms | Data | Spry | InContext Editing | Text | Favorites | 


(eoe) D |S RS E E 
Absolute div 
Relative div 
7 5 Insert Div Tag 7 7 


| Insert: | After start of tag req | <div id="Cont... B Gua 


4 ’ 

{ Cancel 5 

— 

Class: g —— 
ID: g 


ete 
New CSS Rule 


CES ES: 


The Insert Div Tag box will appear. One of the nice features about this method of inserting a 
div is that you can choose where the div will go by toggling the Insert window to the desired 
location. In this case, choose “After start of tag,” and then select “div id Container” as shown. 
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Divs and CSS continued 


We also need to give the div an id, so in the ID box type, “Header” We can add the CSS rule 
now, or we could do it later. Let’s go ahead and add at least one rule now. Click the “New CSS 
Rule,” button. The new CSS Rule menu box will open. First we need to choose which type of 
rule we need. For our purposes, toggle the selector window to ID, that means it will apply 
only to the tag we name. Because we entered through the new div menu, the id name of our 
new div is supplied for us. We could change it if we wanted to, but for now, this is what we 
need. Be aware that both DIV ID names and Style names are case sensitive. Be attentive to 
capitalization in typing these names. 


New CSS Rule 


Y Class (can apply to any HTML element) 


ID (applies to only one HTML element) 
Tag (redefines an HTML element) 
Compound (based on your selection) 


Selector Type: 


Choose a contextual selector type for your CSS rule. — 
( Cancel ) 


[ID (applies to only one HTML elemen) 9 


Selector Name: 


Choose or enter a name for your selector. 


— 


This selector name will apply your rule to 
any HTML elements with id “Header”. 


Less Specific More Specific 


Rule Definition: 


Choose where your rule will be defined. 


| (This document only) H — 


es a 


Finally, we need to choose the kind of Style sheet, which basically just says where we intend 
to apply the style, just on this page or on others we will create later. For today, This document 
only will be OK, but external style sheets (the other option) are handy too. Click OK. 


The Styles Panels 


Clicking OK will bring up the styles panels. This panel also has a list of options on the left. It 
includes Type, Background, Block, Box, Border, List, Positioning, and Extensions. These are 

all things that we can control using CSS. Click each and browse a little. For our Header Div, 
we will begin by adding a border on the bottom. Click the Border option. Then uncheck the 
“Same for All” boxes and set the specifications to match the example on the next page. Click 
OK to close the Styles Box and also to close the New Div Box. 


Category 


Type 
Background 
Block 

Box 

Border 

List 
Positioning 
Extensions 


An Image in the Div 
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CSS Rule definition for #Container 
Border 
Style Width Color 
[_] Same for all [_] Same for all [_] Same for all 
Top: Z] & px E 
Right: 3) B) px E| 
Bottom: solid Z] medium B) px La #FFF 
Left: Z] B) px E] 
Help € Apply ) (cance! ) ac) 


Before we insert an image, we should save the page again; do this periodically as you work. 


Now that we have a Div, let's put something in it. In the document window you should see 
some text that indicates where to put content in the new Header Div. Click behind the text 
and Go: Insert > Image. Navigate to the Ident image and click it. The image should appear on 
screen. Now backspace over the text to remove it. Notice also that the styles we defined have 
been appearing in the Code Panel. 


1®R AO wwe #) 


F 


4 
"m 


f@ |i | 


> © Q Address: 


<!DOCTYPE html PUBLIC "- 
XHTML 1.8 Transitional //EN" 
"http://www .w3.org/TR/xhtm Lt /OTD /xht 
mli-transi tional .dtd"> 

<html xmlns= 

“http://www .w3.org/1999 /xhtmL" > 
<head> 

<meta http-equiv="Content-Type" 
content="text/html; charset=UTF-8" / 


> 
<title>PickBasket</ti tle> 
<style type="text/css"> 
body { 

background-color: #363; 


#Header { 
border-bottom-width: medium; 
border-bottom-style: ridge; 
border-bottom-color: #FFF; 


E 
</style> 
</head> 


<body> 
<div id="Container"> 

<div id="Header"><img src= 
"fi le:///Cruzer /PickBasket/Frui tSi te 
fimages/ident.png" width="255" 
height="198" alt="Basket" /></div> 
</div> 


</body> 
</html> 


Using the Styles Panel 
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We can also create styles using the Styles panel on the right side of the screen. We need some 
Styles for the Container Div so let’s do it that way. Find the Styles panel on the right side of 


your screen. 


AT current 


#Authors 
#Authors ul 
#Authors h3 
#Authors a 
#links 
AlignRight 
a:link 
a:visited 
a:hover 


All Rules 


ncaa aay aaa i 
a= ALP 


Styles Panel 


Edit Style 
New Style 


Setting Styles 


Tag Inspector 


“<body> ‘<div#Container>} 
jr f 
Div ID Class | None 
Contain @) 


The easy way to apply a Style to an existing 
Div is to activate the Div in the Tag Inspec- 
tor and then click the New Style icon on the 
bottom of the CSS panel. Click the edge of a 
div on screen, it will turn blue. Then look at 
the Tag Inspector in the lower left corner of 
your screen. Click the div#Container name. 
It will activate. Now the CSS Panel will know 
which Div should get the new Style. 


With div#Container selected in the Tag Inspector, click the New Styles icon and select an ID 
div.When we select an ID Div, it will apply only to that Div. The name #Container should be 


already in the ID box, if not, just ty 
this box before, but #Container w 


pe it in. The CSS Rule Definition Box will open. We have seen 
ill need a few more rules. In the Box Options adjust the set- 


tings to match the image shown below. 


CSS Rule definition for #Container 
Category Box 
Type 
Background A 
Block Width: 1000 GB (ox) Float: B) 
Box — pman 
Border Height: 700 B) | px =| Clear: © 
List 
Positioning . = 
Srtensions Padding Margin 
m Same for all C) Same for all 
Top: 0 (S) px E) Top: oO Sf px m 
Right: 0 +) fpx B) Right: auto SIE 
Bottom: 0 ° px E) Bottom: wooo E! px = 
Left: 0 $ px 3 Left:auto é| [auto | @ < 
Help Apply (Cancel) 
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Setting Styles 


We will consider the 700 px height to be temporary, specifying a height now will allow us to 
see what we are doing, but we will likely edit the style to remove this later. When we are fin- 
ished we will want the height to stretch with the content and page size. 


We will also want a background color, so go to the Background option and select a light lime 
green. 


More DIV’s 


Next we will need some more DIV’s. Click the Relative DIV icon on the Insert bar. The Insert 
Div Tag box will open. In the Insert box select “After tag” and then select <dif id=Header>. We 
want this DIV to go after the “Header” DIV on the page. Name the new DIV, “Navigation” and 
click the “New CSS Rule” button. 


In the CSS Rule Definition box 

1. Click the Box option and set a width of 250 px and a height of 500 px. 
2. Also in the Box option, select “Float left.” 

3. Click the Type option and select a font face of Verdana... at size 12 bold. 
Click OK to close the Styles box and OK to close the DIV Tag box. 


Click inside the new Div and enter these words: Meet Our Growers, Apple, Pear, Banana, 
Grape, Citrus 


Return after each phrase to create a layout similar to the one below. As soon as we create 
another page, these will become links. 


Editing a Style 


The text we just entered is hugging the left edge a little 
too tightly. Let’s edit the Style to correct that. 


In the CSS Styles Panel, locate the Style for Navigation, 
click to activate, and then click the Edit Style Icon i 
(pencil) at the bottom of the panel. This will reopen P 
the CSS Rule Definition box. Click the “Box” option, 
uncheck “Same for all; and enter 12 under “Left” in the 
padding box. Select “Points” and click Apply. Look at the 
Document window to determine if 12 points is enough 
padding. Padding will be applied like a stroke, half on 
either side of the center line. It works well with text. If we 
are satisfied with the applied change, click OK to exit the 
CSS Definition box. 
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Create and Apply a Class 


A Class is another kind of style that is particularly versatile. It can be applied to almost any- 

thing. We are going to want a class for the center part of our web page so we will create it in 
advance. Return to the Styles Panel and click the New Style icon on the bottom of the panel. 
When the New Style box opens, Select “Class.” We need a Class here because we want to use 


the same Style for several DIV’s. In the Styles panels do the following: 


1. Name the Class, “Fruits.” 


2. Select Box, and set a width of 305 px, the size of the images we want to insert. We do not 
need to set a height; the DIV will conform to the size of the image. 


3. Go to Type and select Verdana, Geneva, 10 points, and Bold 


Click OK and close the Styles box. 


New CSS Rule 


Selector Type: 


Choose a contextual selector type for your CSS rule. 


| Class (can apply to any HTML element) B 


Selector Name: 


( Cancel) 


Hint: 


If you want to know the 
size of an image, open it in 


Choose or enter a name for your selector. Photoshop and go: 
= | 
Image > Size 


This selector name will apply your rule to 
all HTML elements with class "MedText”. 


Rule Definition: 


Choose where your rule will be defined. 


| (This document only) B) 


Matching Div’s 


( Hep ) 


Adobe Photoshop 
File Edit BOEF Layer Select Filter View 
Dy ~ | Mode Ls 


Adjustments » 


Duplicate... 
Apply Image... 
Calculations... 


Alt+Ctri+C 


Now let’s create the four DIV’s we will need for the center of our site. Go to the insert bar (Lay- 
out tab) and click the insert Relative Div icon. Set your Insert Div settings to match the image 
below. We have already created the Class, so select “Fruits” in the Class window. Click inside 


Insert Div Tag 


the Document Window. A new DIV 
should appear. Now we just need 


C i 
a 2 Randa three more to match. The easiest 
gS (Cancel) way to get matching DIV's is to copy 
Class: Fruits B ÅÁ— FF 7 x 
(C Hep and paste in the Code Window. 


iD: Apple {8 


( New CSS Rule ) 
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In the Code panel, locate and highlight this strip: 


<div class="Fruits" id="Apple">Content for 
class "Fruits" id "Apple" Goes Here</div> 


1. Go: Edit > Copy; then 
2. Click behind </div> to insert a cursor and press return. 
3. Go Edit > Paste. 


Return and paste two more times for a total four DIV’s. Modify the Code to match example 
number 1 below. 


1 <div class="Fruits" id="Apple">Content for 
class "Fruits" id "Apple" Goes Here</div> 
<div class="Fruits" id="Apple">Content for 
class "Fruits" id "Apple" Goes Here</div> 
<div class="Fruits” id="Apple">Content for 
class "Fruits" id "Apple" Goes Here</div> 
<div class="Fruits" id="Apple">Content for 
class "Fruits" id "Apple" Goes Here</div> 
Next rename the ID’s as shown in example 2 
<div class="Fruits” id="Apple">Content for 
class "Fruits" id "Apple" Goes Here</div> 
<div class="Fruits" id="Pear">Content for 
class "Fruits" id "Apple" Goes Here</div> 
<div class="Fruits” id="Grapes">Content for 
class "Fruits" id "Apple" Goes Here</div> 
<div class="Fruits" id="Banannas">Content 
for class "Fruits" id "Apple" Goes Here</div> 


Still working in the Code panel, highlight and retype the Content line to match the ID name of 
each DIV as shown in example 3. 


3 <div class="Fruits" id="Apple">Apple</div> 
<div class="Fruits” id="Pear">Pear</div> 
<div class="Fruits" id="Grapes">Grapes </div> 
<div class="Fruits” id="Banannas">Content 
4 for class "Fruits" id "Apple" Goes Here</div> 
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Your final Code section should match example 4 below. 


4 <div class="Fruits” id="Apple">Apple</div> 
<div class="Fruits” id="Pear">Pear</div> 
<div class="Fruits" id="Grapes">Grapes </div> 
|<div class="Fruits" id="Banannas">Banannas 
</div> 


The four new DIV's should look like the example below in your Document Window. 
(You may need to click once in the Document Window to make them appear) 


Apply a Class to Text 


Another way to apply a Class is to use the Properties panel. This method is especially use- 
ful for things like text that appear in a number of different places on the page. Let’s create 
another class to serve as a page title. Click the New Style icon in the bottom of the CSS Styles 
panel. In the New CSS Rule box, specify “Class, and name it Titling. Click the Text Option and 
choose: Verdana, 14 points, and bold. Select a redish purple color that will roughly match the 
grapes. We can either choose a color from the color palette, or sample the color directly from 
the image. 


In the Navigation DIV, highlight the word, “Home.” Next locate the Class window in the Proper- 
ties panel (bottom of your screen). Use the pull down menu to select, “Titling.” 


he 
Fruits 
Cc 


Rename... f 
Attach Style Sheet... | 
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Apply a Style to a Tag 


Our page still has no Headline, for this we will want to use an “H-tag.’ The browsers depend on 
“H-tags” to identify the major content on the page. First, though, we will need another DIV. 
Click the new relative DIV icon on the Insert bar and from the pulldown menus choose: 


Before end of tag and <div id="IdentBar”> 
Name the new DIV, “Headline” 


Click the New CSS Rule button and do the following: 
e In the Box option, set the box width to 500 and the Float to “right” 
e Click the Position option and set the position to relative 


Click OK to exit the CSS dialog, and OK again to close the New Div box. 


Highlight the Content line in your new DIV and replace it with: Pick-a-Basket 


Now we want to specify that Pick-a-Basket is an H1. Make sure the words, “Pick-a-Basket” are 
highlighted and then, in the Properties panel, locate the Format window and use the pull- 
down menu to select H1. 


Format Class 


PROPERTIES 
<> HTML Class | None B [plz] ije] Title 
b ID Container E Link [Z & D Target 


Page Properties... | Listitem... J 


HTML has several defaults that determine the look of an H-tag. These defaults include things 
like size, line spacing and font face. Because of the defaults, our Headline may not look quite 
the way we want it at this point, but we can change that by putting a style in the H1 tag. 


Pick-a-Basket 


First, let’s let the Headline DIV move up beside the Image in the IdentBar. Click the basket 
image to activate it. 
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Wa Image indicator 
Image, 41K w 255 Src te/Images/ident.png [Baa Alt Fruitbasket (3 Class ! Non 
sem H 108 Link oa Edt J gP L 
Map V space Target : Border WN EAN © A 


* O OW dspace Original & (a Align | Left Y $) 
Align 


Now look at the Properties panel; it will have changed because we are now looking at prop- 
erties of the image. Locate the Align Window and toggle the pulldown menu to “left.” That 
means the image should be to the left of anything beside it. 


New Rule 
<r C 
Choose a contextual selector type for your CSS rule. CELA 
Cancel ) 
| Tag (redefines an HTML element) 4 
Selector Name: 


Choose or enter a name for your selector. 


pe 


This selector name will apply your rule to 
all <hl> elements. 


Now for the Style; click the New Style icon in the bottom of the CSS Styles panel. When the 
New Styles box appears, specify “Tag” in the Selector Type window and select “h1” in the 
Selector Name window as shown above. 


When the Style definition box opens, click the Type option and select: Verdana, 24 points, 
bold, and match the color to the Titling text. (If you don’t remember the color, you can just 
pull the eyedropper over to the word Home and sample it). Click Apply to see if your headline 
is the right size and color, otherwise adjust it slightly. Go to the Block option, and choose 
Align center, then click OK to exit the box. 


CSS Rule definition for h1 
Category Type 
Type ————»_sType 
y Background Font-family: Verdana, Geneva, sans-serif E 
—— Block —— 
Block Box Font-size: 24 E | px B) Font-weight: bold B 
Border g 
List Font-style: B) Font-variant: S 
a Line-height: C Je px $ Text-transform: S) 


Text-decoration: |_| underline Color: | #851B1B 
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We also need a subtitle so in the document window, click behind “Pick-a-Basket” and press 
shift and return together. Shift and return will insert a line break in the code <br>, roughly 
this amounts to a single space. If you just press return, that inserts a paragraph <p>, roughly 
equivalent to a double space. On the next line, type: 


Custom Fruit Baskets fresh from the Orchard 


Dreamweaver assumes this line is part of the H1, so the text is too large. Highlight the subtitle 
and go to the Class window in the Properties panel; select Titling. 


None 


Our new headline should resemble the example above, but we should probably move it over 
a little. In the CSS Styles panel, activate the #Headline style, then click the edit (pencil) icon 
at the bottom of the Styles panel. When the CSS Rule Definition box appears, click the Box 
option. We will adjust the margins to position the Headline DIV. In Dreamweaver, Margins are 


applied to the outside of an object, not inside the perimeter. 


Uncheck the “Same for all” box Margin 


MÍ same for all 
Enter 5 px in the Top Window Top: g = 
Right: (+) (pi 
Enter 100 px in the Right Window Ai E 
Click Apply and check the position of the text in the Left: OCHB 


Document window. If you click the edge of the DIV, 

Dreamweaver will display the margin that has been added. 

Continue to adjust the margins until the position is more or Cappy ) (ox) 
less centered over the Fruit DIV’s. The object is to move the 

Headline DIV over without overlapping the image. It may also 

be useful to adjust the width of the DIV. 
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Live view Preview in browser 


HomeTrial.html* X 


Code Design Live Code | 4 | Live View || Inspect) @) f (Title: Home 


æ > ©) ©) Address: file:///Macintosh HD/Users /janevenes/Desktop/PickBasket/Site/HomeTrial.! <> E. 


Checking in Live View 


Let’s see how our page looks. We have two ways to check it, a quick look, and in the browser. 
To take a quick look how the page should look on screen, locate the Live View icon at the top 
of your window and click it. When we are in “Live view” most of the tools in Dreamweaver will 
be deactivated. If we want to make any changes, we will need to click the Live View button 
again to return to a working screen. 


Checking in the Browser 


Another way to check our work is to preview in the actual web browser. To do this, click the 
“Preview in browser” icon (globe). A drop-down menu will appear allowing you to select 
from the available browsers. Select Firefox, if you have it, other wise choose Safari or Internet 
Explorer. A Save box will appear, go ahead and click Save. It may take a few seconds to open, 
but the web page we have developed will open in the browser window. The browser screen 
appears over the Dreamweaver window. Dreamweaver is still open behind the Browser page. 
You can simply close the browser when you want to return to Dreamweaver. 
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Adding Links and Page Duplication 
In order to have links, we should have another page. This will actually be easy. Go: 
File > Save as 


..and save the page once again as “Home.’ Then save the page a second time with a different 
name. Let's call it“Grower” this time. Temporarily close “Home” and let’s make some changes 
on the Grower page. This is another time when it is useful to work with the Code. Looking at 
the Code panel, locate the four DIV’s that we created for the four fruits. Highlight and delete 
them. Now let’s add a new DIV. On the Insert bar, click the insert relative DIV icon and choose 
“After tag,” and <div id="Navigation’> In the ID box, call it Appleby. 


Click in front of the Content text in the new DIV and go: Insert > Image 
Navigate to the Images folder and select, “Susan.” 
The image will appear. Then press Shift and Return together to send the text under the image. 


We could use a Class for this text. Click the New Styles icon on the bottom of the CSS Styles 
panel, and select, “Class, then name the style “Basic” In the Type Option, select Verdana and 
12 points. Click OK to exit the dialog. Now Highlight the text under the Susan image and re- 
place it with the name: Susan Appleby. 


Shift return and add the text: 
(You may choose to copy and paste this text from the file in the Working Files folder) 


The Appleby family has been growing apples for three generations. They have twenty-five 
different orchards and grow ten different varieties of apples. Appleby apples are hand picked 
and packed to meet our specifications. They arrive orchard fresh at your destination. 


Return to the CSS Styles panel and click #Appleby to activate it, then click the edit (pencil) 
icon in the bottom of the CSS Styles Panel. Select the Box option and edit the margins until 
the image is positioned well on the page. 


Edit the margins 


Dreamweaver 
page 21 


One more change. Highlight over the Meet our growers text in the Navigation DIV and replace 


it with “Home.’ Then Highlight over the Purple “Home” title and replace it with “Meet our 
Growers.” 


Linking Two Pages 
Page Properties 
PROPERTIES —-— — 
rete Format | None B Class | None B [B [z = HE +2|/23| Title 
b css ID Container (=) Link B o p Target 
| Page Properties... | List Itdm 


Link Click Folder 


Now we are ready for some links. Highlight over the word “Home” in the Navigation Div on 
the Grower page. Locate the Link window on the Properties panel, and click the folder to the 
right of the window. Navigate to the Site folder and choose, “Home.” 


OQO ss Select File 
(<>) (22/= Map) (Gite 


Y DEVICES | .DS_Store 
E Macintosh HD [@) GrowerTrial.html 
E iDisk M HomeTrial.htmi 


E Images 
V PLACES 
Desktop 
@ janevenes 


A Applications 
Bi Documents 


Mame HamaTrial html 


URL: HomeTrial.html 


Relative to: | Document E) GrowerTrial.html 


Change default Link Relative To in the site definition. 


(Parameters...) 


Select file name from: ( Data Sources...) Server Site Root 
Cancel (Choose ) 


The link will turn blue and an underline will appear. Let’s get rid of the Underline. Click the 
Page Properties button on the Properties panel. In the Links CSS window, change the Under- 
line style to “never underline.” We can change the link color here too, but we could also create 
a Style for the links. Save your page. 


Now reopen the Home page. Highlight the “Meet our Growers,’ text in the Navigation DIV, 
then go to the Link window and click the folder again. This time choose “Grower.” Save your 
page. 
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Test the Links 


Now let's test the links. We need to preview in the browser for this so click the Preview in 
browser icon (globe) at the top of your screen. Click the “Home,” and “Meet our Growers,’ links 
to see if they work. 


There are other interesting ways to make links, to learn more do the tutorial on Links and 
Navigation, coming soon. 


Home 


Pick-a-Basket 


Custom Fruit Baskets fresh from the Orchard 


Pick-a-Basket 


Custom Fruit Baskets fresh from the Orchard 


Susan Appleby 

The Appleby family has been growing apples for three generations. They have 
twenty-five different orchards and grow ten different varieties of apples. Appleby 
apples are hand picked and packed to meet our specifications. They arrive orchard 
fresh at your destination. 


